<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-17 18:23:45
 * @LastEditTime: 2022-03-31 10:43:25
-->
<template>
	<div class="openfuxing">
        <img src="../../assets/images/register/fuxing-banner.png" class="top_banner"/>
        <div class="tab-box">
            <div :class="activId == `1` ?'item-box-active': 'item-box'">
                <i v-if="activId == `1`" class="active-check"><span>1</span></i>                
                <i v-else class="tab-item-icon"><el-icon><Select color="#ffffff"/></el-icon></i>
                <span>填写机构信息</span>
            </div>
            <span class="hr-style"></span>
            <div :class="activId == `1` ?'item-box': 'item-box-active'">
                <i :class="activId == `1` ? 'tab-item' : 'active-check'"><span>2</span></i>                         
                <span>填写个人信息</span>
            </div>
        </div>
        <div class="open-content">
            <oragnInfo v-if="activId == `1`" @selectActiveId="selectActiveId"/>
            <personalInfo v-else  @selectActiveId="selectActiveId"/>
        </div>
	</div>
</template>
<script setup lang="ts">
import type { Select } from 'element-plus';
import { ComponentInternalInstance } from 'vue';
import oragnInfo from './oragnInfo.vue';
import personalInfo from './personalInfo.vue';

	const { appContext } = getCurrentInstance() as ComponentInternalInstance;
    const activId = ref(`1`);
    const selectActiveId = (val:string)=>{
        activId.value = val
    }
   
</script>
<style lang="scss" scoped>
	.openfuxing {
		@extend %relative;
       
		.top_banner {
            width: 100%;
		}

        .tab-box{
            width: 470px;
            margin: auto;
            margin-top: 30px;
            display: flex;
            align-items: center;
            justify-content: right;
            .tab-item-icon{
                background-color: $project_them;
                display: inline-block;
                width: 18px;
                height: 18px;
                text-align: center;
                margin-right: 10px;
            }
           
            .hr-style{
                width: 170px;
                height: 0.5px;
                background-color: #C8C9CC;
                margin: 0 15px;
            }
          
            //为选中样式
            .item-box{
                color: #94979E;
                .tab-item{
                    border: 1px solid #E8EAEC;
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    text-align: center;
                    margin-right: 10px;
                    color: #94979E;
                }
            }
            //选中样式
            .item-box-active{
                color: #262626;
            }
             .active-check{
                background-color: #262626;
                display: inline-block;
                width: 18px;
                height: 18px;
                text-align: center;
                margin-right: 10px;
                span{
                    color: #fff;
                }
            }
        }
        .open-content{
            width: 900px;
            margin: auto;
            padding-top: 30px;
        }
	}
</style>
